<template>
	<view class="center">

		
		<!-- <view class="userinfo acea-row row-middle">
			<view class="acea-row row-middle" style="margin-top: 50rpx;" v-if="userinfo.uid>0">
				<view>
					<image class="avatar" :src="userinfo.avatar" mode="aspectFit"></image>
				</view>
				<view class="fc-fff fs-28">
					<view>{{userinfo.real_name }}</view>
					<view class="mt-20">{{ userinfo.phone | mobile }}</view>
				</view>
			</view>
			<view class="acea-row row-middle" style="margin-top: 50rpx;"  v-else>
				<view class="">
					<image class="avatar" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/avatar-mode.jpg" mode="aspectFit"></image>
				</view>
				<view class="fc-fff fs-28" @click="gologin">登录/注册</view>
			</view>
		</view> -->
<!-- 		<view class="nav">
			<view class="item acea-row row-between-wrapper" @click="gouserinfo">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/uiser01.png" mode="aspectFit"></image>
					<text>个人信息</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view> 
			<view class="item acea-row row-between-wrapper" @click="pathclick('/pages/index/shougu')">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user02.png" mode="aspectFit"></image>
					<text>任职受雇信息</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user03.png" mode="aspectFit"></image>
					<text>家庭成员信息</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user04.png" mode="aspectFit"></image>
					<text>银行卡</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
		</view>
		
		<view class="nav" style="margin-top: 20rpx;">
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user05.png" mode="aspectFit"></image>
					<text>安全中心</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
		</view>
		
		<view class="nav" style="margin-top: 20rpx;">
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user06.png" mode="aspectFit"></image>
					<text>关怀版</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user07.png" mode="aspectFit"></image>
					<text>帮助</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user08.png" mode="aspectFit"></image>
					<text>我要咨询</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user09.png" mode="aspectFit"></image>
					<text>关于</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="icon" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/user10.png" mode="aspectFit"></image>
					<text>首页常用业务管理</text>
				</view>
				<view class="iconfont icon-xiangyou fc-888 fs-26"></view>
			</view>
		</view> -->
		<!-- 		<view class="exitbtn" v-if="userinfo.uid>0" @click="exitlogin">退出登录</view>
				
				<view style="width: 100%;height: 100rpx;"></view> -->
		
		<view class="new-user">
			<view class="infonav acea-row row-middle row-center">
				<view class="avatar-box acea-row row-middle row-center">
					<view class="newavatar">
						<block v-if="userinfo.uid>0">
							<image v-if="userinfo.xingbie=='男性'" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/7030ec077b51cc8b927d972338f1c6bb.png" mode=""></image>
							<image v-else-if="userinfo.xingbie=='女性'" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/38be48a5817d4e00d5155cca101267e4.png" mode=""></image>
							<image v-else src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/532aece071475ecc03bd45928a9cfd60.png" mode=""></image>
						</block>
						<image v-else src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/f8f540a210303a3839c260236bc2a688.png" mode=""></image>
					</view>
				</view>
				
				<view class="zhuce-nav acea-row row-middle row-center">
					<view class="zhuce-box acea-row row-middle row-center">
						<view v-if="userinfo.uid>0" class="getinfo">
							<view class="tips acea-row row-middle row-center" @click="gouserinfo">
								<text>个人信息</text>
								<text class="iconfont icon-xiangyou"></text>
							</view>
							<view class=" bold" style="color: #1C2230;font-size: 28rpx;margin-top: 10rpx;">{{ userinfo.real_name }}</view>
							<view class="bold" style="color:rgb(206, 141, 77);font-size: 24rpx;">
								<view class="acea-row row-middle" style="margin-top: 6rpx;" v-if="eyeshow">
									<view style="width: 400rpx;">
										<view>纳税人识别号</view>
										<view style="margin-top: 0;">{{ userinfo.card_id_shibie }}</view>
									</view>
									<view style="margin-left: 10rpx;">
										<image @click.stop="openeye(0)" class="eye" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/9a823c28e691763f9509932111b2bb39.png" mode="aspectFit"></image>
									</view>
								</view>
								<view v-else class="acea-row row-middle" style="margin-top: 6rpx;">
									<text>纳税人识别号</text>
									<text style="margin-left: 15rpx;">{{ userinfo.card_id_shibie | code }}</text>
									<image style="margin-left: 34rpx;" @click.stop="openeye(1)" class="eye" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/6a48a6cb0dc811eb6a2808726618f67e.png" mode="aspectFit"></image>
								</view>
							</view>
						</view>
						<view v-else class="zhuce acea-row row-middle row-center" @click.stop="gologin">
							注册/登录
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;" v-if="eyeshow"></view>
			<view class="meun-nav" :class="userinfo.uid>0?'on':''">
				<view class="acea-row row-around" style="padding: 0 10rpx;">
					<view class="caidan acea-row row-middle row-center row-column" @click="pathClick('/pages/index/family')">
						<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/d9d3060da8ef19a4684ec9ea020148d4.png" mode="aspectFit"></image>
						<text class="bold" style="font-size: 24rpx; padding: 10rpx 0; display: inline-block;">家庭成员</text>
						<text class="add-num acea-row row-middle row-center" v-if="familylist.length>0">{{ familylist.length }}人</text>
						<text class="add acea-row row-middle row-center" v-else>添加</text>
					</view>
					<view class="caidan acea-row row-middle row-center row-column" @click="pathClick('/pages/index/shougu')">
						<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/e0b9b8a897aa403722d51c52df8449ae.png" mode="aspectFit"></image>
						<text class="bold" style="font-size: 24rpx; padding: 10rpx 0; display: inline-block;">任职受雇</text>
						<text class="add-num acea-row row-middle row-center" v-if="list.length>0">{{ list.length }}家</text>
						<text class="add acea-row row-middle row-center" v-else>添加</text>
					</view>
					<view class="caidan acea-row row-middle row-center row-column" @click="pathClick('/pages/index/yhcard')">
						<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/f807ea6d2d069df9ee04c70ddc6bdce0.png" mode="aspectFit"></image>
						<text class="bold" style="font-size: 24rpx; padding: 10rpx 0; display: inline-block;">银行卡</text>
						<text class="add-num acea-row row-middle row-center" v-if="yinkangkalist.length>0">{{ yinkangkalist.length }}张</text>
						<text class="add acea-row row-middle row-center" v-else>添加</text>
					</view>
				</view>
				<view class="cate-nav">
					<view class="acea-row row-between-wrapper item"  @click="pathClick('/')">
						<view class="acea-row row-middle">
							<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/290aa935aae769416525b787006978be.png" mode="aspectFit"></image>
							<text class="bold">切换关怀版</text>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view class="acea-row row-between-wrapper item"  @click="pathClick('/')">
						<view class="acea-row row-middle">
							<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/8a1a1c841b0c12d593cc98375dcd5dea.png" mode="aspectFit"></image>
							<text class="bold">安全中心</text>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view class="acea-row row-between-wrapper item"  @click="pathClick('/')">
						<view class="acea-row row-middle">
							<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/cd529a8de50189e9cc9644e7f31b395c.png" mode="aspectFit"></image>
							<text class="bold">帮助中心</text>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view class="acea-row row-between-wrapper item"  @click="pathClick('/')">
						<view class="acea-row row-middle">
							<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/ebaa1fe5e110acbb5c46dbbb27307873.png" mode="aspectFit"></image>
							<text class="bold">我要咨询</text>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view class="acea-row row-between-wrapper item" @click="pathClick('/')">
						<view class="acea-row row-middle">
							<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/2cd43ceaf2fa9a6473e199f26e11b104.png" mode="aspectFit"></image>
							<text class="bold">关于&更新</text>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="newexitbtn bold acea-row row-middle row-center" v-if="userinfo.uid>0" @click="exitlogin">退出登录</view>
			</view>
			
			
		</view>
		  
		  <tabbar :url="'/pages/index/gerencenter'"></tabbar>

		
		
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar.vue'
	import {
		getUserInfo,
		getLogout,
		staffList,
		familyList,
		bankcardList,
	} from '@/api/user.js'
	export default {
		components:{
			tabbar
		},
		filters:{
			mobile(val){
				var reg = /^(\d{3})\d{4}(\d{4})$/;  
				return val.replace(reg, "$1****************$2");
			},
			code(str){
				let len = str.length;
				let xing = '';
				for(var i=0;i<len;i++) {
					xing+='*';
				}
				return str.substring(0,1)+xing+str.substring(str.length-1);
			},
		},
		data() {
			return {
				userinfo:[],
				eyeshow:0,
				islook:0,
				list:[],
				familylist:[],
				yinkangkalist:[],
				
			};
		},
		onShow() {
			this.UserInfo();
			this.getlist();
			this.getfamilyList();
			this.getbankcardList();
			uni.hideTabBar({
				animation: false
			});
			let islook = uni.getStorageSync('islook');
			if( islook == 1 ){
				this.eyeshow = 1;
			}else{
				this.eyeshow = 0;
			}
		},
		methods:{
			getbankcardList(){
				bankcardList().then(res=>{
					this.yinkangkalist = res.data.data;
				})
			},
			getfamilyList(){
				familyList().then(res=>{
					this.familylist = res.data.data;
				})
			},
			getlist(){
				let that = this;
				staffList().then(res=>{
					that.list = res.data.data;
				})
			},
			pathClick(url){
				if( url == '/' ) return this.$util.Tips({ title:'功能开发中' })
				uni.navigateTo({
					url: url
				})
			},
			openeye(val){
				let islook = uni.getStorageSync('islook');
				if( islook ){
					this.eyeshow = val;
				}else{
					uni.navigateTo({
						url: '/pages/index/phonecheck'
					})
				}
			},
			pathclick(url){
				uni.navigateTo({
					url: url
				})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/users/login/index'
				})
			},
			exitlogin(){
				let that = this;
				uni.showLoading()
				setTimeout(()=>{
					uni.hideLoading()
					getLogout()
						.then(res => {
							uni.clearStorage()
							that.$store.commit("LOGOUT");
							that.userinfo = [];
							// uni.reLaunch({
							// 	url: '/pages/index/gerencenter'
							// })
							// that.UserInfo()
						})
						.catch(err => {});
				},1500)
				
			},
			UserInfo(){
				 getUserInfo().then(res=>{
					this.userinfo = res.data;
					uni.setStorageSync('phone',res.data.phone)
				 })
			},
			gouserinfo(){
				uni.navigateTo({
					url:'/pages/index/gereninfo'
				})
			}
		},
		onHide() {
			uni.setStorageSync('islook',0)
		},
		onUnload() {
			uni.setStorageSync('islook',0)
		}
	}
</script>

<style lang="scss" scoped>
	page{ background-color: #f8f8f8 !important; }
	// page{ background-color:red !important; }
	 // .uni-page {
	 //        background-color: red; // 这里将#ff0000替换为你想要的颜色值
	 //    }
	.center{
		
		.new-user{     
			 font-family: 方正楷体;
			.infonav{
				width: 100%;
				height: 600rpx;
				
				// background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/f199a21974c7587825c1ed82890fb4e7.png');
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240112/deb11730140795cfdc02d07c90a09b1e.png');
				background-size: 100% 100%;
				position: relative;
				
				.avatar-box{
					width: 220rpx;
					height: 220rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, .5);
					margin-bottom: 100rpx;
					
					.newavatar{
						width: 180rpx;
						height: 180rpx;
						border-radius: 50%;
						
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.zhuce-nav{
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					width: 100%;
					height: 220rpx;
					// border: 1rpx solid red;
					
					.zhuce-box{
						background-image: linear-gradient(to right,#F7E7D3,#F5DBC2,#EBCCA8,#EABF9B);
						border-radius: 20rpx 20rpx 0 0;
						width: 665rpx;
						height: 220rpx;
						padding: 30rpx 0 0 30rpx;
					}
					
					.zhuce{
						width: 200rpx;
						height: 60rpx;
						background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/20eba99ad0eb52eea36ab2d0dbb1ff79.png');
						background-size: 100% 100%;
						color: #938270;
						font-size: 28rpx;
						// margin-top: -60rpx;
						margin-bottom: 100rpx;
					}
					
					.getinfo{
						width: 600rpx;
						height: 200rpx;
						// border: 1rpx solid red;
		
					}
					.eye{
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
					}
					
					.tips{
						width: 150rpx;
						height: 44rpx;
						line-height: 44rpx;
						background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240110/e343726dd069f16a926b55234fab5994.png');
						background-size: 100% 100%;
						position: absolute;
						top: 35rpx;
						right: 44rpx;
						color: #ffffff;
						font-size: 24rpx;
						
						.icon-xiangyou{
							font-size: 24rpx;
							margin-right: -10rpx;
						}
					}
					
				}
			}
			
			.meun-nav{
				width: 100%;
				height: 500rpx;
				border-radius: 40rpx;
				background-color: #F5F6FA;
				margin-top: -80rpx;
				position: relative;
				padding: 26rpx 10rpx;
				
				// &.on{
				// 	margin-top: -30rpx;
				// }
				
				.caidan{
					width: 29%;
					min-height: 200rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					padding-bottom:20rpx;
					padding-top: 20rpx;
					// padding: 20rpx 0;
					
					image{
						width: 75rpx;
						height: 75rpx;
					}
					
					text{
						color: #171C1D;
						font-size: 28rpx;
						margin-top: 15rpx;
					}
					
					.add{
						width: 78rpx;
						// height: 34rpx;
						line-height: 34rpx;
						border: 2rpx solid #5D93E7;
						color: #5D93E7;
						border-radius: 30rpx;
						font-size: 24rpx;
						
					}
					.add-num{
						width: 70rpx;
						line-height: 34rpx;
						background-color: #5587F6;
						color: #ffffff;
						border-radius: 30rpx;
						font-size: 24rpx;
					}
					
				}
				.cate-nav{
					width: 690rpx;
					// height: 500rpx;
					background-color: #ffffff;
					border-radius: 15rpx;
					margin: 22rpx 20rpx;
					padding: 30rpx 40rpx;
					// font-size: 26rpx;
					
					.item~.item{
						margin-top: 26px;
					}
					
					image{
						width: 45rpx;
						height: 45rpx;
					}
					
					text{
						font-size: 28rpx;
						color: #171C1D;
						margin-left: 30rpx;
					}
					.icon-xiangyou{
						font-size: 32rpx;
						font-weight: bold;
						color: #171C1D;
					}
				}
				
			}
			
			.newexitbtn{
				width: 690rpx;
				line-height: 88rpx;
				height: 88rpx;
				color: #5587F6;
				font-size: 30rpx;
				background-color: #ffffff;
				border-radius: 15rpx;
				margin: 0 auto;
			}
			
		}
		
		
		
		
		/****/
		.exitbtn{
			width: 100%;
			line-height: 88rpx;
			color: #F52B14;
			text-align: center;
			background-color: #fff;
			margin-top: 30rpx;
		}
		
		.bold{
			font-weight: 650;
		}
		
		// .nav{
		// 	width: 100%;
		// 	background-color: #fff;
		// 	padding-left: 40rpx;
			
		// 	.item{
		// 		border-bottom: 1rpx solid #f5f5f5;
		// 		padding: 25rpx 25rpx 25rpx 0;
				
		// 		.icon{
		// 			width: 50rpx;
		// 			height: 50rpx;
		// 			margin-right: 20rpx;
		// 		}
		// 	}
		// }
		
		// .userinfo{
		// 	background-image: url('https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/userbg.png');
		// 	background-size: 100% 100%;
		// 	width: 100%;
		// 	height: 300rpx;
		// 	padding: 0 40rpx;
			
		// 	.avatar{
		// 		width: 120rpx;
		// 		height: 120rpx;
		// 		border-radius: 50%;
		// 		overflow: hidden;
		// 		margin-right: 20rpx;
		// 	}
		// }
		
	}
</style>
